const squareSlideBarBox = document.querySelector('.square_slide_bar_box');
const squareSlildeBar = document.querySelector('.square_slilde_bar');
const square = document.querySelector('.square');

//小方块拖动
function squareSlildeBarMov() {
    let mv = (e) => {
        console.log('ok');
        e.stopPropagation();
        let mouseX = e.pageX - (squareSlideBarBox.offsetLeft - squareSlideBarBox.offsetWidth / 2);
        let movX = mouseX / squareSlideBarBox.offsetWidth * 100;
        let r = 255 / 100 * movX;
        let g = 200 - r;
        let b = 255 - r;
        if (movX >= 100) {
            squareSlildeBar.style.width = 100 + '%';
            return;
        }
        squareSlildeBar.style.width = `${movX}%`;
        squareSlildeBar.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
        square.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
    }
    let remv = (e) => {
        e.stopPropagation();
        squareSlideBarBox.removeEventListener('mousemove', mv);
        squareSlildeBar.style.width = squareSlildeBar.offsetWidth;
    }
    squareSlideBarBox.addEventListener('click', mv);
    square.addEventListener('mousedown', (e) => {
        e.stopPropagation();
        squareSlideBarBox.addEventListener('mousemove', mv);
    });
    squareSlideBarBox.addEventListener('mouseup', remv);
    squareSlideBarBox.addEventListener('mouseleave', remv);
}

squareSlildeBarMov();